/* Page Specific CSS */

body {font-family: Merriweather; background: #fff; color: #333; font-size: 100%; border: 10px #cc0000 solid; margin: 0px; padding: 20px 20px 200px 20px; font-size: 16px; }
h1, h2, h3, h4, h5, h6 {font-family: Helvetica, Arial, sans-serif;}
h2 {margin-top: 82px;}

h3.functionH {margin-left: -14px; margin-top: 52px; border-top: 3px solid #cc0000; border-left: 3px solid #cc0000; border-right: 3px solid #cc0000; padding-left: 14px; padding-top: 9px; }
img {width: 100%;} 

p a, a {color: #333; text-decoration: none; padding-bottom: 0px; border-bottom: 2px #CCF4FF solid;}
p a:visted {color: #ff00ff;}
a:hover {color: #cc0000;}
a:visited {color: #333;}
small {padding: 10px 0px;}
p, ol {line-height: 24px;}

pre {word-wrap: break-word; padding: 14px; background: #F0F0F0;}
code {font-family: "Consolas", "Ubuntu Mono", monospace; line-height: 22px; font-size: 13px; color: #636363; font-weight: normal;}

/* funsies */
::selection {background: #44FFB4;}
::-moz-selection {background: #44FFB4;}

img.petThumbs {height: 80px; width: 80px; border-radius: 1000px;}

.button {padding: 5px 4px; background-color: #fff; font-size: 10px;}

#menu {color: #fff; padding: 20px; float: left; position: fixed; left: 40px; top: 40px; max-width: 300px; font-family: Helvetica, Arial, sans-serif; font-size: 14px;}
#menu ul {list-style: none; margin: 0px; padding: 0px;}
#menu li {line-height: 34px;}
#menu li a {padding: 4px 8px; background-color: #F0F0F0; text-decoration: none; border: none;}
#menu li a.a2 {background-color: #CCF4FF;}
#menu li a:hover {background-color: #e7e7e7; color: #333;}

#wrapper {margin: 0px auto; max-width: 800px; padding-top: 40px;}

/* Examples */
.ssExample {margin: 20px -28px; background-color: #CCF4FF; padding: 20px 28px; background-color: #CCF4FF; border: 8px solid #cc0000; margin-top: 44px; padding-top: 0px; overflow: auto;}
.ssExample li {padding: 2px 0px;}
.ssExample h2 {margin-top: inherit;}

/* Table */
.ssExample table {min-width: 600px;}
.tHeader::after {content: " \2193 \2191 "; font-size: 10px; padding-left: 3px;}

/* Map Popup Style */
.leaflet-popup-content h2 {margin-bottom: 4px; margin-top: auto; font-family: Merriweather;}

/* Most Cuddleable Template */
#mostCuddle img.most {max-width: 400px; border-radius: 9999px; margin-top: 34px;}
#mostCuddle {text-align: center;}
#mostCuddle table {width: auto;}
#mostCuddle li {padding: 10px 0px; font-size: 18px; display: inline-block;}
.boxText {background-color: #cc0000; padding: 4px 8px; font-family: Helvetica, Arial, sans-serif;}

/* Bar Chart */
#dogBar.labels text {text-align: right;}
#dogBar.bar .labels text {fill: #333;}
#dogBar.bar rect {fill: #e6e6e6;}
#dogBar.axis {shape-rendering: crispEdges;}
#dogBar .x.axis line {stroke: #CCF4FF; fill: none;}
#dogBar.x.axis path {fill: none;}
#dogBar.x.axis text {fill: #333;}
#dogBar.xLabel {font-family: sans-serif; font-size: 9px;}


/* Line Chart */
#dogLine.axis {shape-rendering: crispEdges;}
#dogLine.x.axis .minor, #dogLine.y.axis .minor {stroke-opacity: .5;}
#dogLine.x.axis {stroke-opacity: 1;}
#dogLine.y.axis line, #dogLine.y.axis path, #dogLine.x.axis path {fill: none; stroke: #acacac; stroke-width: 1;}
#dogLine .x.axis line {stroke: #acacac; stroke-opacity: .75;}
.bigg {-webkit-transition: all .2s ease-in-out; -webkit-transform: scale(2);}
path.chartLine {stroke: #14ECC8; stroke-width: 3; fill: none;}
div.tooltip {position: absolute; text-align: left; padding: 4px 8px; width: auto; font-size: 10px; height: auto; background: #fff; border: 0px; pointer-events: none;}
circle {fill: #fff;}

/* Pie Chart */
.arc path { stroke: #fff;}

/* Responsive Town */

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) and (max-width: 1024px) {
  body {padding-bottom: 50px;}
  #wrapper {max-width: 100%; padding-top: 20px;}
  #menu {color: #fff; padding: 0px; float: none; position: relative; left: auto; top: auto; max-width: 100%; font-family: Helvetica, Arial, sans-serif;}
  #menu li {display: inline-block;}
  h3.functionH {margin: 0px; border-top: 5px solid #cc0000; border-left: 0px; border-right: 0px; padding-top: 9px; word-wrap: break-word; padding-left: 0px;}
  ul {padding-left: 20px;}
}
